<template>
  <div id="app">
      <div class="swiper-container"
           ref="slider">
          <div class="swiper-wrapper">
              <!--<div class="swiper-slide">-->
                  <!--<img src="./fixtures/sliders/t1.svg"/>-->
              <!--</div>-->
              <!--<div class="swiper-slide">-->
                  <!--<img src="./fixtures/sliders/t2.svg"/>-->
              <!--</div>-->
              <div class="swiper-slide" v-for="slide in slides">
              <img :src=slide.img_url :alt="slide.img_url" />
              </div>
          </div>
          <div class="swiper-pagination"
               ref="pagination"></div>
      </div>
      <div class="announcement">
         <label>快讯</label>
          <span>{{announcement}}</span>
      </div>
      <div class="book-list">
          <div class="header">
              <div class="heading">{{ heading }}</div>
              <div class="more">更多...</div>
          </div>
          <div class="book-items">
              <div class="book"
                   v-for="book in books"
                   tag="div"
                   @click="$emit('select', book)"
              >
                  <div class="cover">
                      <img :src="book.img_url"/>
                  </div>

                  <div class="title">{{ book.title }}</div>
                  <div class="authors">{{ book.authors | join }}</div>
              </div>
          </div>
      </div>

  </div>
</template>

<script>
  import Swiper from "swiper"
  import 'swiper/dist/css/swiper.css'
  import t1 from "./fixtures/sliders/t1.svg"
  import t2 from "./fixtures/sliders/t2.svg"

  import c1 from "./fixtures/covers/1.svg"
  import c2 from "./fixtures/covers/2.svg"
  import c3 from "./fixtures/covers/3.svg"
  import c4 from "./fixtures/covers/4.svg"
  import c5 from "./fixtures/covers/5.svg"
  import c6 from "./fixtures/covers/6.svg"

    export default{
    name: 'app',
        mounted() {
            new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            })
        },
        filters: {
            join(args){
                return args.join(',')
            }
        },
        data(){
            return{
                announcement:'今日上架图书全部8折',
                slides:[
                    {id:1,img_url:t1},
                    {id:2,img_url:t2}
                ],
                books:[
                    {
                      "id":1,
                      "title":"Android 高级进阶",
                      "authors":[
                              "顾浩鑫"
                      ],
                      "img_url":c1
                    },
                    {
                        "id":2,
                        "title":"淘宝天猫电商运营与数据化选品完全手册",
                        "authors":[
                            "老夏"
                        ],
                        "img_url":c2
                    },
                    {
                        "id":3,
                        "title":"大数据架构详解",
                        "authors":[
                            "朱洁",
                            "罗华霖"
                        ],
                        "img_url":c3
                    },
                ]
            }
        }
    }
</script>

<style type="text/css">
  .swiper-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .swiper-wrapper {
        height: 200px;
    }
    .swiper-slide img {
        max-width: 100%;
    }
    .swiper-slide {
        text-align: center;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}
</style>
<style lang="less">
    .book-list {
        margin: 0 14px;
        & > .header {
            display: table;
            width: 100%;
            border-bottom: 1px solid #efefef;

            & > .heading {
                display: table-cell;
                padding: 12px;
            }

            & > .more {
                display: table-cell;
                text-align: right;
                vertical-align: middle;
                font-size: 10px;
                color: #cccccc;
                padding-right: 14px;
            }
        }

        & .book-items {
            display: table;
            width: 100%;
            padding-top: 12px;
        }

        & .book {
            font-size: 10px;
            text-align: center;
            float: left;
            width: 33%;
            margin: 12px auto;
            & .cover {
            }

            & .title, & .authors {
                margin: 5px auto;
                width: 100px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            & .authors {
                color: #898989;
                margin-top: 10px;
                text-align: left;
            }
        }
    }
    .announcement {
        font-size: 12px;
        padding:5px;
        background:#fff;
    }

    .announcement > label {
        padding: 3px 10px;
        margin: 3px 10px;
        background: #FACCB7;
        border-radius: 3px;
        color: #FF5102;

    }

    .announcement > span {
        padding: 3px 10px;
        color: #333;
        display:inline-block;
    }
</style>
